<template>
	<div class="article">
		<div class="list_all" v-for="item in getlist" >
		<router-link :to="{name:'Article_all',params:{id:item.id}}">
			<div class="list_top">
				<p class="title">{{item.title}}</p>
				<span class="autho">{{item.autho}}</span>
			</div>
			<div class="list_bottom">
				<p class="main">{{item.main}}</p>
				<p class="focus">{{item.focus}}</p>
				<p class="down">下载：{{item.down}}</p>
			</div>
    </router-link>
	</div>
    <div class="more" @click="Getmore()"><Button type="success" long >{{more}}~</Button></div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data(){
		return {
			num:6,
      more:'加载更多'
		}
	},
	computed:{
		...mapState(['articles']),
     getlist:function (){
       let isArray=[];
       for(let i=0;i<this.num;i++){
           isArray[i]=this.articles[i];
       }
       return isArray;
		}
	},
	created(){

	},
	methods:{
    Getmore(){
      if(this.num<this.articles.length){
        this.num+=5;
      }
      if(this.num>=this.articles.length){
        this.num=this.articles.length;
        this.more='没有更多了';
      }
    }
	},
	watch:{
	}

}
</script>

<style scoped>
	.list_all{ border-bottom: 1px solid gainsboro;width: 90%;margin:5%;}
	.title{color: blue; font-size: 16px;}
	.autho{color: gainsboro;padding-top: 10px;display: block;}
	.main{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;padding-top: 10px;}
	.focus{color: #53FF53;padding-top: 10px;}
  .more{padding-bottom: 60px;margin-top: -20px;}
</style>
